import React from 'react';
import { Form, Card, Button, Input, Divider, Row, Col, Select, Radio, DatePicker, Spin } from 'antd';
import { submitmyprocessapply } from '@/services/flowMine/apply';
import pageTabUtil from '@/utils/pageTabUtil';
import moment from 'moment';
import { connect } from 'umi';
import Step from '@/components/Step';
import { FORM_TYPE_MAP, ICON_TYPE_MAP } from './utils';
import { useTemplateInfo, useProcess } from './hooks';
import styles from './style.less';

const commonRules = [{ required: true, message: '请输入必填项' }];

const formLayout = {
    wrapperCol: { span: 18 },
    labelCol: { span: 6 }
};

function disabledDate(current) {
    return current && current < moment().endOf('day');
}

const JobRankForm = props => {
    const { form, location, user } = props;
    const { getFieldDecorator: field } = form;
    const { query } = location;
    const { type } = query;
    const { currentUser } = user;
    const templateQuery = { companyId: 100, iconType: ICON_TYPE_MAP[type] };
    const [templateLoading, templateInfo] = useTemplateInfo(templateQuery);

    // const formValueJson = React.useMemo(() => form.getFieldsValue(), [form]);
    const [processLoading, process] = useProcess(templateInfo.processDeploymentId);
    // const [processLoading, process] = useProcess('a21c48de-7264-11ea-93d4-0242e54e0a72');

    // 用于区别职级类型、职级表单
    const isGradeTypeForm = type === FORM_TYPE_MAP[0];

    const handleSubmit = async () => {
        form.validateFields(async (err, values) => {
            if (!err && !templateLoading) {
                const { id, formDeploymentId, processDeploymentId, templateName } = templateInfo;
                const params = {
                    id,
                    formDeploymentId,
                    processDeploymentId,
                    templateName,
                    templateId: id,
                    formValueJson: JSON.stringify({ ...values, releaseType: 'new', companyName: '微微科技有限公司' })
                };
                await submitmyprocessapply(params);
                // pageTabUtil.goBack();
            }
        });
    };

    const handleCancel = () => {
        pageTabUtil.goBack();
    };

    const title = isGradeTypeForm ? '新增职级序列' : '新增职级';

    return (
        <Card title={title} style={{ margin: 24 }}>
            <div className={styles.title}>基础信息</div>
            <Form {...formLayout} style={{ display: 'flex' }}>
                <div style={{ width: '50%' }}>
                    <Form.Item label="实施范围">
                        {field('companyId', { rules: commonRules, initialValue: 100 })(
                            <div>{currentUser.companyName}</div>
                        )}
                    </Form.Item>

                    <Form.Item label="制度名称">
                        {field('institutionName', { rules: commonRules, initialValue: '集团职级体系' })(
                            <div>集团职级体系</div>
                        )}
                    </Form.Item>

                    <Form.Item label="制度类型">
                        {field('institutionType', { rules: commonRules, initialValue: 'personnel' })(
                            <Select disabled>
                                <Select.Option value="personnel">人事制度</Select.Option>
                            </Select>
                        )}
                    </Form.Item>

                    <Form.Item label="制度简介">
                        {field('institutionIntroduce', { rules: commonRules })(
                            <Input.TextArea rows={5} placeholder="请输入制度简介" />
                        )}
                    </Form.Item>
                </div>

                <div style={{ width: '50%' }}>
                    <Form.Item label="申请日期">
                        {field('applyDate', { rules: commonRules, initialValue: moment().format('YYYY-MM-DD') })(
                            <div>{moment().format('YYYY-MM-DD')}</div>
                        )}
                    </Form.Item>

                    <Form.Item label="制度编号">
                        {field('institutionNo', { rules: commonRules })(<Input placeholder="请输入制度编号" />)}
                    </Form.Item>

                    <Form.Item label="生效日期" style={{ marginBottom: 0 }}>
                        {field('auditEffectFlag', { rules: commonRules, initialValue: '0' })(
                            <Radio.Group>
                                <Radio value="0">审核通过即可生效</Radio>
                                <Radio value="1">指定日期生效</Radio>
                            </Radio.Group>
                        )}
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 6 }}>
                        {form.getFieldsValue(['auditEffectFlag']).auditEffectFlag === 'no' &&
                            field('startTime', { rules: commonRules, initialValue: moment().add(1, 'days') })(
                                <DatePicker format="YYYY/MM/DD" disabledDate={disabledDate} />
                            )}
                    </Form.Item>
                </div>
            </Form>
            <Divider />

            <div className={styles.title}>制度内容</div>
            <Form {...formLayout}>
                <div style={{ width: '50%' }}>
                    {isGradeTypeForm && (
                        <>
                            <Form.Item label="职级序列">
                                {field('rankTypeName', { rules: commonRules })(<Input placeholder="请输入职级序列" />)}
                            </Form.Item>
                            <Form.Item label="职级序列描述">
                                {field('rankTypeDesc', { rules: commonRules })(
                                    <Input.TextArea rows={5} placeholder="请输入职级序列描述，不超过 1000 字" />
                                )}
                            </Form.Item>
                        </>
                    )}

                    {!isGradeTypeForm && (
                        <>
                            <Form.Item label="职级名称">
                                {field('gradeName', { rules: commonRules })(<Input placeholder="请输入职级名称" />)}
                            </Form.Item>
                            <Form.Item label="职级">
                                {field('gradeCode', { rules: commonRules })(<Input placeholder="请输入字母与数字" />)}
                            </Form.Item>
                            <Form.Item label="职级描述">
                                {field('gradeDesc', { rules: commonRules })(
                                    <Input.TextArea rows={5} placeholder="请输入职级描述，不超过 1000 字" />
                                )}
                            </Form.Item>
                        </>
                    )}

                    <Form.Item label="原因">
                        {field('modifyRemark', { rules: commonRules })(
                            <Input.TextArea rows={5} placeholder="请输入原因，不超过 200 字" />
                        )}
                    </Form.Item>
                </div>
            </Form>
            <Divider />

            <div className={styles.title}>审批进度</div>
            <Row style={{ width: '50%' }}>
                <Col offset={6}>
                    <Spin spinning={processLoading}>
                        <Step data={process} />
                    </Spin>
                    <div style={{ margin: '32px 0' }}>
                        <Button type="primary" style={{ marginRight: 16 }} onClick={handleSubmit}>
                            提交审批
                        </Button>
                        <Button onClick={handleCancel}>取消</Button>
                    </div>
                </Col>
            </Row>
        </Card>
    );
};

export default connect(({ user }) => ({ user }))(Form.create({ name: 'JobRankForm' })(JobRankForm));
